import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["color", "check"];
import { jsx as _jsx } from "react/jsx-runtime";
import { CheckOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd-v4';
import React from 'react';
import './ThemeColor.less';
var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var color = _ref.color,
      check = _ref.check,
      rest = _objectWithoutProperties(_ref, _excluded);

  return _jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
    style: {
      backgroundColor: color
    },
    ref: ref,
    children: check ? _jsx(CheckOutlined, {}) : ''
  }));
});

var ThemeColor = function ThemeColor(_ref2, ref) {
  var value = _ref2.value,
      colorList = _ref2.colorList,
      onChange = _ref2.onChange,
      formatMessage = _ref2.formatMessage;

  if (!colorList || (colorList === null || colorList === void 0 ? void 0 : colorList.length) < 1) {
    return null;
  }

  return _jsx("div", {
    className: "theme-color",
    ref: ref,
    children: _jsx("div", {
      className: "theme-color-content",
      children: colorList === null || colorList === void 0 ? void 0 : colorList.map(function (_ref3) {
        var key = _ref3.key,
            color = _ref3.color;
        if (!key) return;
        return _jsx(Tooltip, {
          title: formatMessage({
            id: "app.setting.themecolor.".concat(key)
          }),
          children: _jsx(Tag, {
            className: "theme-color-block",
            color: color,
            check: value === color,
            onClick: function onClick() {
              return onChange && onChange(color);
            }
          })
        }, color);
      })
    })
  });
};

export default /*#__PURE__*/React.forwardRef(ThemeColor);